<template>
    <div class="_body" theme="dark">
        <hearder>
            <banner>
                <div style="position: absolute; z-index: 1111">
                    <switchbutton @change="kgChange" class="kg"></switchbutton>
                </div>
            </banner>
        </hearder>

        <Tabs :tabpanels="tabpanels.data" v-model:activetab="tabpanels.activetab">
            <template #vueslot>
                <div class="maincontain">
                    <cardc @chat="showchat" v-for="(item, index) in mockdata.getListByType('vue')" @showcode="showCode(item)" :key="`vue${index}`" :_obj="item">
                    </cardc>
                </div>
                <upTop :itemClassName="'_body'"></upTop>
                <sideBar @clickEvent="sideBarClick"></sideBar>

            </template>

            <template #gameslot>
                <div class="maincontain">
                    <cardc @chat="showchat" v-for="(item, index) in mockdata.getListByType('game')" @showcode="showCode(item)" :key="`game${index}`" :_obj="item">
                    </cardc>
                </div>
            </template>
            <template #bigscreenslot>
                <div class="maincontain">
                    <cardc @chat="showchat" v-for="(item, index) in mockdata.getListByType('bigscreen')" @showcode="showCode(item)" :key="`bigscreen${index}`" :_obj="item">
                    </cardc>
                </div>
            </template>
            <template #jscssslot>
                暂无内容
            </template>
        </Tabs>
        <Drawer v-model="chatDrawerdata.show" ref="chatdrawer">
            <ChatList v-model="chatDrawerdata.content" :itemid="chatDrawerdata.itemid"></ChatList>
        </Drawer>
        <Drawer v-model="Drawerdata.show" ref="drawer">
            <Repl class="_Repl" ref="coderun"></Repl>
            <!-- <div style="height:49%;">
                <Codeview v-model="Drawerdata.content" />
            </div>
            <input class=" mindes" type="button" @click="runcode" value="点击运行查看" />
            <div style="height:49%;">
              
               
            </div> -->
        </Drawer>
    </div>
</template>
<script setup>
import hearder from "@/layout/Heard.vue";
import Drawer from "@/layout/Drawer.vue";
import Codeview from "@/components/codeview/index.vue";
import CodeRun from "@/components/codeview/runcode.vue";
import Repl from "@/components/codeview/repl.vue";
import banner from "@/layout/Banner.vue";
import cardc from "@/layout/ContentCard.vue";
import switchbutton from "@/components/switchButton.vue";
import sideBar from "@/components/sideBar.vue";
import upTop from "@/components/upTop.vue";
import Tabs from "@/layout/Tabs/Tabs.vue";
import ChatList from "@/layout/ChatPanel/ChatList.vue";
import { removeToken } from '@/utils/token';
import { readTestFile } from '@/utils/tool'
import { getChathistory } from '@/api/system';

import mockdata from '@/mock/data.js';

const router = useRouter();
let coderun = ref(null)

//代码抽屉
let Drawerdata = ref({
    show: false,
    title: '',
    content: ''
})
//留言抽屉
let chatDrawerdata = ref({
    show: false,
    title: '',
    content: [],
    itemid: ''
})

//tabpanel配置
let tabpanels = ref({
    activetab: 'tab1',
    data: [
        {
            title: 'VUE组件',
            icon: 'Sunrise',
            id: 'tab1',
            slot: 'vueslot',
            bcolor: "#0095B3"
        },
        {
            title: 'CANVAS小游戏',
            icon: 'Ship',
            id: 'tab2',
            slot: 'gameslot',
            bcolor: "#1782CF"
        },
        {
            title: 'vue大屏组件',
            icon: 'PartlyCloudy',
            id: 'tab3',
            slot: 'bigscreenslot',
            bcolor: "#4768EB"
        },
        {
            title: 'js+CSS动效',
            icon: 'Lightning',
            id: 'tab4',
            slot: 'jscssslot',
            bcolor: "#825EED"
        }

    ]
})

//显示代码
let showCode = (item) => {
    Drawerdata.value.show = true
    Drawerdata.value.content = readTestFile(item.content.FileName.replace('.html', '.vue'))
    console.log(111, Drawerdata.value.content);
    coderun.value.renderCode(Drawerdata.value.content)
};



//主题开关
let kgChange = (val) => {
    let el = document.querySelector("._body");
    let currenttheme = el.getAttribute("theme");
    el.setAttribute("theme", currenttheme === "dark" ? "light" : "dark");
};
//侧边菜单事件
let sideBarClick = (index) => {
    if (index == 1) router.push({ path: "/me" });
    if (index == 2) {
        removeToken()
        router.push({ path: "/login" });
    }

};
//显示留言
let showchat = async (item) => {

    chatDrawerdata.value.itemid = item.id

    // let _newchatlist = [{
    //     user: 'wxf',
    //     content: '欢迎来到我的小站',
    //     time: '2020-01-01 00:00:00'
    // },
    // {
    //     user: '随便进的',
    //     content: '这网站见到的东西都是组件！有点东西，就是内容少了点',
    //     time: '2020-01-01 00:00:00'
    // },

    // {
    //     user: 'wxf',
    //     content: '欢迎来到我的小站',
    //     time: '2020-01-01 00:00:00'
    // },
    // {
    //     user: '随便进的',
    //     content: '这网站见到的东西都是组件！有点东西，就是内容少了点',
    //     time: '2020-01-01 00:00:00'
    // }
    //     ,
    // {
    //     user: 'wxf',
    //     content: '欢迎来到我的小站',
    //     time: '2020-01-01 00:00:00'
    // },
    // {
    //     user: '随便进的',
    //     content: '这网站见到的东西都是组件！有点东西，就是内容少了点',
    //     time: '2020-01-01 00:00:00'
    // }
    //     ,
    // {
    //     user: 'wxf',
    //     content: '欢迎来到我的小站',
    //     time: '2020-01-01 00:00:00'
    // },
    // {
    //     user: '随便进的',
    //     content: '这网站见到的东西都是组件！有点东西，就是内容少了点',
    //     time: '2020-01-01 00:00:00'
    // }
    //     ,
    // {
    //     user: 'wxf',
    //     content: '欢迎来到我的小站',
    //     time: '2020-01-01 00:00:00'
    // },
    // {
    //     user: '随便进的',
    //     content: '这网站见到的东西都是组件！有点东西，就是内容少了点',
    //     time: '2020-01-01 00:00:00'
    // }
    //     ,
    // {
    //     user: 'wxf',
    //     content: '欢迎来到我的小站',
    //     time: '2020-01-01 00:00:00'
    // },
    // {
    //     user: '随便进的',
    //     content: '这网站见到的东西都是组件！有点东西，就是内容少了点',
    //     time: '2020-01-01 00:00:00'
    // }


    // ]
    let _newchatlist = await getChathistory({ itemid: item.id })
    console.log(444, _newchatlist);
    chatDrawerdata.value.content = []
    if (_newchatlist.code === 200 && _newchatlist.data && _newchatlist.data.length > 0)
        chatDrawerdata.value.content.push(..._newchatlist.data)
    chatDrawerdata.value.show = true
};

</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
    width: 1px;
    height: 1px;
}

::-webkit-scrollbar-button {
    width: 1px;
    height: 1px;
}
._body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    position: relative;

    .kg {
        top: 20px;
        left: 20px;
    }
    .maincontain {
        padding: 0 20px;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    @keyframes circle-out-hesitate {
        100% {
            clip-path: circle(125%);
        }
        40% {
            clip-path: circle(40%);
        }
        0% {
            clip-path: circle(0%);
        }
    }

    animation: 3s circle-out-hesitate cubic-bezier(0.25, 1, 0.3, 1) forwards;

    //     @keyframes square-in-center {
    //   from {
    //     clip-path: inset(100% 100% 100% 100%);
    //   }
    //   to {
    //     clip-path: inset(0 0 0 0);
    //   }
    // }
    // @keyframes wipe-out-down {
    //   from {
    //     clip-path: inset(0 0 0 0);
    //   }
    //   to {
    //     clip-path: inset(100% 0 0 0);
    //   }
    // }
}
._Repl {
    width: 100%;
    height: calc(100% - 60px);
}
</style>
